import { Fragment } from 'react'
import { Button, Col, Form, Input, Row, Select } from 'antd';
// import { UploadOutlined } from '@ant-design/icons';

// const props = {
//   name: 'file',
//   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
//   headers: {
//     authorization: 'authorization-text',
//   },
//   onChange(info) {
//     if (info.file.status !== 'uploading') {
//       console.log(info.file, info.fileList);
//     }
//     if (info.file.status === 'done') {
//       message.success(`${info.file.name} file uploaded successfully`);
//     } else if (info.file.status === 'error') {
//       message.error(`${info.file.name} file upload failed.`);
//     }
//   },
// };

export default function StudentInforsSearch({ onFinish, setOpen, setOpenUpload, additional }) {

  const [form] = Form.useForm();

  const items = [
    { name: "fd_idNum", label: "学号", colSpan: 4, offset: 0, options: [] },
    { name: "fd_claNum", label: "班级", colSpan: 4, offset: 0, options: additional.classes },
    { name: "fd_professionalNum", label: "专业", colSpan: 2, offset: 0, options: additional.professionals },
  ]

  return (
    <Fragment>
      <Form
        form={form}
        name="advanced_search"
        onFinish={onFinish}
        size="small"
      >
        <Row gutter={32} >
          {
            items.map(item => {
              return (
                <Col span={item.colSpan} offset={item.offset} key={item.name}>
                  <Form.Item
                    name={item.name}
                    label={item.label}
                    wrapperCol={
                      { span: 20, }
                    }
                  >
                    {
                      item.name === 'fd_idNum' ?
                        <Input /> :
                        <Select
                          showSearch
                          filterOption={(input, option) =>
                            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                          }
                          style={{ width: 120 }}
                          key="value"
                          options={item.options}
                        />
                    }
                  </Form.Item>
                </Col>
              )
            })
          }
          <Col className="trainingPlan-sea-but" span={2} offset={2}>
            <Form.Item>
              <Button htmlType="submit">检索</Button>
            </Form.Item>
          </Col>
          <Col className="trainingPlan-sea-but" span={2} offset={5}>
            <Form.Item>
              <Button onClick={() => { setOpen(true) }}>添加学生</Button>
            </Form.Item>
          </Col>
          <Col className="trainingPlan-sea-but" span={1} offset={0}>
            <Form.Item>
              <Button onClick={() => { setOpenUpload(true) }}>上传文件</Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Fragment>
  )
}
